import useMappingProps from 't/common/hooks/useMappingProps';
import { defineComponent, ref } from 'vue';

// import { showConfirmDialog } from 'tm/basic/dialog';
import { useQuasar } from '@teld/q-components';
// import Divider from 'tm/basic/divider';
// import Icon from 'tm/basic/icon';
// import Tag from 'tm/basic/tag';

import './history.scss';

import TChip from 't/basic/chip'
import TTooltip from 't/basic/tooltip';

export default defineComponent({
  props: {
    historyArray: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  emits: ['remove', 'click', 'clear'],

  setup(props, { attrs, emit, expose, slots }) {
    const $q = useQuasar();

    const publicMethod = {};
    const [mappingProps, mappingExpose] = useMappingProps(props, publicMethod);

    expose(mappingExpose);

    const showConfirmDialog = msg => {
      return new Promise((resolve, reject) => {
        $q.dialog({
          // title: 'Confirm',
          cancel: true,
          persistent: true,
          ...msg,
        })
          .onOk(() => {
            resolve('Ok');
          })
          .onCancel(() => {
            reject();
          });
      });
    };

    const isExpanded = ref(true);

    const onHistoryTagClose = (tag, index) => {
      debugger;
      emit('remove', index, tag);
    };

    const onHandlerClick = tag => {
      debugger;
      emit('click', tag);
    };
    const readerTag = () => {
      return (
        <div class={'popup-search-historyTag'}>
          {props.historyArray.map((history: any, index) => (
            // <span style='max-width: 150px; height: 32px; padding:10px;'
            //   onClick={e => {
            //     onHandlerClick(history);
            //     e.stopPropagation();
            //   }}
            // >

            // </span>
            <TChip
              class='popup-search-history-item'
              clickable
              // removable
              onClick={e => {
                onHandlerClick(history);
                e.stopPropagation();
              }}
              onRemove={() => {
                onHistoryTagClose(history, index);
              }}
              label={history.title}
            >
              {$q.platform.is.desktop && (
                <TTooltip>{history.title}</TTooltip>
              )}
            </TChip>
          ))}
        </div>
      );
    };

    const onDeleteClick = () => {
      showConfirmDialog({
        message: $q.lang.popupSearch.confirmDeleteHistory,
      })
        .then(() => {
          emit('clear');
        })
        .catch(() => {
          // on cancel
        });
    };

    const readerHistory = () => {
      return (
        <div>
          <div style='margin:8px 16px; margin-top: 16px;'>
            <div class='popup-search-history-bar'>
              <div>{$q.lang.popupSearch.history}</div>
              <div>
                <span style='cursor: pointer;' onClick={onDeleteClick}>{$q.lang.popupSearch.clear}</span>
              </div>
            </div>
            {isExpanded.value && readerTag()}
          </div>
          {isExpanded.value && <h style='margin: 12px auto;'></h>}
        </div>
      );
    };

    return () => {
      return readerHistory();
    };
  },
});
